<template>
  <el-container v-wechat-title="'分类'">
    <el-header>
      <nav-bar />
    </el-header>
    <!-- <el-divider></el-divider> -->
    <el-main>
      <el-select v-model="siteSelect" placeholder="请选择" style="position: absolute;top: 73px">
          <el-option-group
            v-for="group in options"
            :key="group.label"
            :label="group.label">
            <el-option
              v-for="item in group.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>              
            </el-option>
          </el-option-group>
      </el-select>
      <!-- style="position: absolute;top: 120px" -->
      <zssq-classify v-if="siteSelect === zhuishushenqi.value" />
      <sanwenzx-classify v-if="siteSelect === sanwenzx.value" />
    </el-main>
  </el-container>
</template>

<script lang="ts">
import { ref, reactive, toRefs, defineComponent } from 'vue'
import Search from "@c/Search.vue"
import NavBar from "@c/navBar/NavBar.vue"
import zssqClassify from "@c/site/zhuishushenqi/Classify.vue"
import sanwenzxClassify from "@c/site/sanwenzx/Classify.vue"

export default defineComponent({
  components: {
    Search,
    NavBar,
    zssqClassify,
    sanwenzxClassify,
  },
  setup() {
    
    /**
     * 网址信息
     */
    const siteInfo = reactive({
      zhuishushenqi: {
        value: "zhuishushenqi.com",
        label: "追书神器"
      },
      sanwenzx: {
        value: "sanwenzx.com",
        label: "散文在线"
      },
      // rongshuxia : {
      //   value: "rongshuxia.com",
      //   label: "榕树下 华语文学门户"
      // },
      // huachaoqq: {
      //     value: "huachaoqq.com",
      //     label: "花朝晴起网"
      // }
    })
    
    // 选择的值，默认为追书神器
    const siteSelect = ref(siteInfo.zhuishushenqi.value)
    
    // 用于组件显示
    const options = ref([
      {
        label: "小说网站",
        options: [
          siteInfo.zhuishushenqi,
        ]
      },
      {
        label: "文学",
        options: [
          siteInfo.sanwenzx,
          // siteInfo.rongshuxia,
          // siteInfo.huachaoqq,
        ]
      }
    ])
    
    const sites = toRefs(siteInfo);

    return {
      options,
      siteSelect,
      ...siteInfo,
    }
  }
})

</script>

<style scoped>
.el-select + .el-container{
  position: absolute;
  top: 120px;
  min-width: 1000px;
}
/* .el-input {
  position: absolute;
  width: 300px;
  left: 200px;
  top: 10px;
} */
.el-header {
  padding: 0;
  margin: 0;
}
.el-divider {
  margin: 0;
}
</style>
